﻿@import "variables";

html, body {
    height: 100%;
}

body {
    padding-top: 15px;
    padding-left: 65px;
}

.container, .container-fluid {
    &:extend(html);
}

.validation-summary-errors{
    color:@brand-danger;
    font-weight:700;
}

.maxHeight {
    &:extend(html);
    min-height: 100%;
}

.height10percent {
    height: 10%;
    min-height: 10%;
}

.height45percent {
    height: 45%;
    min-height: 45%;
}

.halfheight {
    height: 50%;
    min-height: 50%;
}

.height90percent {
    height: 90%;
    min-height: 90%;
}

.bg-primary-light {
    background-color: @brand-primary-light;
}

.bg-success-light {
    background-color: @brand-success-light;
}

.bg-info-light {
    background-color: @brand-info-light;
}

.bg-warning-light {
    background-color: @brand-warning-light;
}

.bg-danger-light {
    background-color: @brand-danger-light;
}

.hideOverflow, .hideOverflowInLine {
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    -ms-text-overflow: ellipsis;
    -o-text-overflow: ellipsis;
}

.hideOverflow {
    width: 100%;
    display: block;
}

/* Modal Slacker 
    http://bootsnipp.com/snippets/featured/slacker-style-modal
    */
.modal-slacker {
    height:85%;
    width:100%;
    margin: 0;
}

.modal-slacker .modal-content {
    margin-top: 8%;
    border-radius: 0;
    border-left-width: 0;
    border-right-width: 0;
    height: 75%;
    overflow: auto;
}

.modal-slacker .modal-header .close {
    color: #fff;
    background-color: @brand-info;
    border-color: @brand-info-dark;
    opacity: 1;
    padding: 10px 17px;
    font-size: 27px;
}

.modal-slacker .modal-title {
    font-size: 34px;
    font-weight: bold;
}

@media (min-width: 992px) {
    .modal-slacker .modal-header,
    .modal-slacker .modal-body,
    .modal-slacker .modal-footer {
        width: 900px;
    }
}

@media (min-width: 768px) {
    .modal-slacker .modal-header,
    .modal-slacker .modal-body,
    .modal-slacker .modal-footer {
        width: 600px;
        margin: 30px auto;
    }
}

/* Vertical nav bar*/
.navbar-twitch {
    position: fixed;
    top: 0;
    left: 0;
    width: 50px;
    height: 100%;
    border-radius: 0;
    border: 0;
    z-index: 1030;
}

.navbar-twitch.open {
    width: 240px;
}

.navbar-twitch > .container {
    padding: 0;
    width: 100%;
}

.navbar-twitch .navbar-header,
.navbar-twitch .navbar-brand {
    float: none;
    display: block;
    width: 100%;
    margin: 0;
}

.navbar-twitch .navbar-brand {
    height: 50px;
}

.navbar-twitch > .container .navbar-brand {
    padding: 0;
    margin: 0;
}

.navbar-twitch > .container .navbar-brand > .small-nav {
    display: block;
}

.navbar-twitch > .container .navbar-brand > .small-nav > span.logo,
.navbar-twitch.open > .container .navbar-brand > .full-nav {
    display: block;
    font-weight: bold;
    padding: 0 2px 15px 3px;
}

.navbar-twitch.open > .container .navbar-brand {
    width: 100%;
    padding: 15px 15px 60px;
    text-align: center;
}

.navbar-twitch.navbar-inverse > .container .navbar-brand > .small-nav > span.logo {
    padding: 10px;
}

.navbar-twitch .navbar-nav > li {
    float: none;
}

.navbar-twitch > .container .full-nav {
    display: none;
}

.navbar-twitch.open > .container .full-nav {
    display: block;
}

.navbar-twitch.open > .container .small-nav {
    display: none;
}

.navbar-twitch .navbar-collapse {
    padding: 0;
}

.navbar-twitch .navbar-nav {
    float: none;
    margin: 0;
}

.navbar-twitch .navbar-nav > li > a {
    padding: 0;
    color: @silver;
}

.navbar-twitch .navbar-nav > li > a > span {
    display: block;
    font-size: 16pt;
    padding: 13px 15px 13px 12px;
}

.navbar-twitch .tooltip,
.navbar-twitch .tooltip .tooltip-inner {
    max-width: auto;
    white-space: nowrap;
}

.navbar-twitch-toggle {
    z-index: 1040;
    position: fixed;
    top: 5px;
    left: 55px;
}

.navbar-twitch ~ .navbar-twitch-toggle > .nav-open {
    display: inline-block;
}

.navbar-twitch ~ .navbar-twitch-toggle > .nav-close {
    display: none;
}

.navbar-twitch.open ~ .navbar-twitch-toggle {
    left: 245px;
}

.navbar-twitch.open ~ .navbar-twitch-toggle > .nav-open {
    display: none;
}

.navbar-twitch.open ~ .navbar-twitch-toggle > .nav-close {
    display: inline-block;
}

.navbar {
    background-image: none !important;
}
